<template>
  <div style="margin: 0 auto;width: 1200px">
    <h1 style="text-align: center">{{title}}</h1>
    <WordQuiz v-if="loadComponent" :words="testWord" :count="testCount" @finish="testResult"/>
  </div>
</template>

<script setup>
import WordQuiz from '@/components/word/WordTestCheck.vue'
import {getCurrentInstance, ref} from 'vue'
import {getPageUnitTimes} from "@/api/primary/index.js";
const route = useRoute()
const title = ref('')
const loadComponent = ref(false) // 初始时不挂载
const {proxy} = getCurrentInstance();
const {word_test_scope} = proxy.useDict("word_test_scope")

const testWord = ref({})
const testCount = ref(0)

onBeforeMount(() => {
  console.log('组件即将挂载，DOM 还不存在')
  handleQueryTimes()

  // 可以做一些初始化逻辑
  // 例如：准备数据、设置变量、打印日志等
})

onMounted(() => {
  title.value = ("初中-" +  route.query.book + "-" + route.query.unit + "-单词或词组").toUpperCase() + initTitleData()
})


//初始化数据
function initTitleData(){
  // console.log(word_test_scope)
  let value = word_test_scope.value;
  let find = value.find(item => item.value === route.query.times );
  if(find === undefined) {
    return "测试"
  }
  return find.label
}

//加载数据
async function handleQueryTimes() {
  // console.log(route.query)
  await getPageUnitTimes(route.query).then((res) => {
    if (res.code === 200 && res.data !== undefined) {
      // console.log(res)
      let data = res.data
      testWord.value = {}
      data.forEach(item => {
        testWord.value[item.name] = item.chinese
      })
      testCount.value = testWord.value.length
      console.log(testWord.value)
      loadComponent.value = true
    }
  })
}
const testResult = (result) => {
  console.log('测试完成:', result)
  // { correct: 25, total: 30, accuracy: "83.3" }
}

</script>

